@teamturing/react-kit 2.48.1 → 2.49.0

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

@@ -5,7 +5,7 @@ type Props = {
 } & ViewProps & Pick<HTMLAttributes<HTMLDivElement>, 'onClick'>;
 declare const _default: import("react").ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
-} & import("../..").SxProp & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "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" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/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" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "border/accent/blue" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/primary/disabled" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/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/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/primary" | "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/weak" | "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" | "surface" | "surface/overlay"> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "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" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/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" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "border/accent/blue" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/primary/disabled" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/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/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/primary" | "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/weak" | "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" | "surface" | "surface/overlay"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "none" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "full"> & import("../../utils/styled-system").GapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & import("../../utils/styled-system").ColumnGapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & import("../../utils/styled-system").RowGapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & Pick<HTMLAttributes<HTMLDivElement>, "onClick"> & {
+} & import("../..").SxProp & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "surface" | "surface/overlay" | "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" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/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" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "border/accent/blue" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/primary/disabled" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/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/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/primary" | "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/weak" | "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"> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "surface" | "surface/overlay" | "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" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/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" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "border/accent/blue" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/primary/disabled" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/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/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/primary" | "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/weak" | "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"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "none" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "full"> & import("../../utils/styled-system").GapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & import("../../utils/styled-system").ColumnGapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & import("../../utils/styled-system").RowGapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & Pick<HTMLAttributes<HTMLDivElement>, "onClick"> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;

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

@@ -272,7 +272,7 @@ declare const GradientText: import("styled-components").IStyledComponent<"web",
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
 } & {
     typography?: import("styled-system").ResponsiveValue<"m" | "s" | "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>, "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "medium" | "bold" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 1 | 2> & 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" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "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" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/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" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "border/accent/blue" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/primary/disabled" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/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/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/primary" | "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/weak" | "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"> & {
+} & 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>, "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "medium" | "bold" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 1 | 2> & 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" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "surface" | "surface/overlay" | "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" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/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" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "border/accent/blue" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/primary/disabled" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/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/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/primary" | "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/weak" | "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/HorizontalDivider/index.d.ts

@@ -1,10 +1,10 @@
-import { ColorKey, SurfaceElevationKey } from '@teamturing/token-studio';
+import { ColorKey } from '@teamturing/token-studio';
 import { HTMLAttributes } from 'react';
 import { BorderColorProps, BorderProps, Theme } from 'styled-system';
 import { SxProp } from '../../utils/styled-system';
 type Props = {
     width?: BorderProps['borderBottomWidth'];
-    color?: BorderColorProps<Theme, ColorKey | SurfaceElevationKey>['borderBottomColor'];
+    color?: BorderColorProps<Theme, ColorKey>['borderBottomColor'];
     variant?: BorderProps['borderBottomStyle'];
 } & SxProp & Pick<HTMLAttributes<HTMLHRElement>, 'className'>;
 declare const HorizontalDivider: ({ className, width, color, variant, ...props }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ColorKey, RadiiKey, SpaceKey, SurfaceElevationKey } from '@teamturing/token-studio';
+import { ColorKey, RadiiKey, SpaceKey } from '@teamturing/token-studio';
 import { LayoutProps, ColorProps, FlexboxProps, BackgroundProps, BorderProps, PositionProps, ShadowProps, BorderRadiusProps, Theme, BorderColorProps } from 'styled-system';
 import { ColumnGapProps, GapProps, RowGapProps, SxProp } from '../../utils/styled-system';
-type Props = {} & SxProp & LayoutProps & ColorProps<Theme, ColorKey | SurfaceElevationKey> & FlexboxProps & BackgroundProps & BorderProps & BorderColorProps<Theme, ColorKey | SurfaceElevationKey> & PositionProps & ShadowProps<Theme> & BorderRadiusProps<Theme, RadiiKey> & GapProps<Theme, SpaceKey> & ColumnGapProps<Theme, SpaceKey> & RowGapProps<Theme, SpaceKey>;
+type Props = {} & SxProp & LayoutProps & ColorProps<Theme, ColorKey> & FlexboxProps & BackgroundProps & BorderProps & BorderColorProps<Theme, ColorKey> & PositionProps & ShadowProps<Theme> & BorderRadiusProps<Theme, RadiiKey> & GapProps<Theme, SpaceKey> & ColumnGapProps<Theme, SpaceKey> & RowGapProps<Theme, SpaceKey>;
 declare const View: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>>;
 export default View;
 export type { Props as ViewProps };

package/dist/index.js

@@ -42372,6 +42372,10 @@ const scaleColor = {
   'scale/yellow/8': palette.mustardYellow800,
   'scale/yellow/9': palette.mustardYellow900
 };
+const surfaceColor = {
+  'surface': palette.white,
+  'surface/overlay': palette.white
+};
 const color = {
   ...textColor,
   ...bgColor,
@@ -42379,18 +42383,15 @@ const color = {
   ...iconColor,
   ...linkColor,
   ...dimColor,
-  ...scaleColor
+  ...scaleColor,
+  ...surfaceColor
 };
 
 const shadow = {
   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 = {
+const elevation = {
   'shadow/overlay': shadow.shadowMedium
 };
 
@@ -42780,14 +42781,9 @@ const theme = {
   fontSizes,
   lineHeights,
   radii,
-  colors: {
-    ...color,
-    ...surfaceElevation
-  },
+  colors: color,
   gradients: gradient,
-  shadows: {
-    ...shadowElevation
-  },
+  shadows: elevation,
   opacity
 };
 

package/dist/theme/index.d.ts

@@ -85,199 +85,199 @@ declare const theme: {
         readonly full: number;
     };
     colors: {
-        surface: "#FFFFFF";
-        'surface/overlay': "#FFFFFF";
-        'scale/violet/0': "#F3EFFD";
-        'scale/violet/1': "#E8E1FB";
-        'scale/violet/2': "#D9CDF9";
-        'scale/violet/3': "#C6B5F6";
-        'scale/violet/4': "#9C7EEF";
-        'scale/violet/5': "#835EEB";
-        'scale/violet/6': "#7756D6";
-        'scale/violet/7': "#5D43A7";
-        'scale/violet/8': "#483481";
-        'scale/violet/9': "#372763";
-        'scale/gray/0': "#F9FAFB";
-        'scale/gray/1': "#F3F4F6";
-        'scale/gray/2': "#E5E7EB";
-        'scale/gray/3': "#D1D5DB";
-        'scale/gray/4': "#8D94A0";
-        'scale/gray/5': "#7A828D";
-        'scale/gray/6': "#6F7680";
-        'scale/gray/7': "#575C64";
-        'scale/gray/8': "#43484E";
-        'scale/gray/9': "#33373B";
-        'scale/blue/0': "#edf2fd";
-        'scale/blue/1': "#c6d8fa";
-        'scale/blue/2': "#abc5f7";
-        'scale/blue/3': "#84aaf4";
-        'scale/blue/4': "#6d99f1";
-        'scale/blue/5': "#4880ee";
-        'scale/blue/6': "#4274d9";
-        'scale/blue/7': "#335ba9";
-        'scale/blue/8': "#284683";
-        'scale/blue/9': "#1e3664";
-        'scale/green/0': "#E9FAF6";
-        'scale/green/1': "#BAEFE2";
-        'scale/green/2': "#98E8D4";
-        'scale/green/3': "#69DDC0";
-        'scale/green/4': "#4CD6B4";
-        'scale/green/5': "#1FCCA1";
-        'scale/green/6': "#1CBA93";
-        'scale/green/7': "#169172";
-        'scale/green/8': "#117059";
-        'scale/green/9': "#0D5644";
-        'scale/pink/0': "#FCF2FD";
-        'scale/pink/1': "#F5D6F8";
-        'scale/pink/2': "#F0C2F4";
-        'scale/pink/3': "#E9A7EF";
-        'scale/pink/4': "#E595EC";
-        'scale/pink/5': "#DE7BE7";
-        'scale/pink/6': "#CA70D2";
-        'scale/pink/7': "#9E57A4";
-        'scale/pink/8': "#7A447F";
-        'scale/pink/9': "#5D3461";
-        'scale/skyblue/0': "#EFF9FD";
-        'scale/skyblue/1': "#CFEDF8";
-        'scale/skyblue/2': "#B7E4F5";
-        'scale/skyblue/3': "#96D8F1";
-        'scale/skyblue/4': "#82D1EE";
-        'scale/skyblue/5': "#63C5EA";
-        'scale/skyblue/6': "#5AB3D5";
-        'scale/skyblue/7': "#468CA6";
-        'scale/skyblue/8': "#366C81";
-        'scale/skyblue/9': "#2A5362";
-        'scale/red/0': "#FDF0F0";
-        'scale/red/1': "#F9CFCF";
-        'scale/red/2': "#F6B8B8";
-        'scale/red/3': "#F29898";
-        'scale/red/4': "#F08484";
-        'scale/red/5': "#EC6565";
-        'scale/red/6': "#D75C5C";
-        'scale/red/7': "#A84848";
-        'scale/red/8': "#823838";
-        'scale/red/9': "#632A2A";
-        'scale/yellow/0': "#FEF9EE";
-        'scale/yellow/1': "#FCEBCC";
-        'scale/yellow/2': "#FAE2B3";
-        'scale/yellow/3': "#F8D490";
-        'scale/yellow/4': "#F7CC7A";
-        'scale/yellow/5': "#F5BF59";
-        'scale/yellow/6': "#DFAE51";
-        'scale/yellow/7': "#AE883F";
-        'scale/yellow/8': "#876931";
-        'scale/yellow/9': "#675025";
-        dim: "#00000099";
-        link: "#4880ee";
-        'link/hovered': "#335ba9";
-        'link/pressed': "#335ba9";
-        'link/neutral': "#7A828D";
-        'link/neutral/hovered': "#575C64";
-        'link/neutral/pressed': "#575C64";
-        'link/neutral/bold': "#575C64";
-        'link/neutral/bold/hovered': "#33373B";
-        'link/neutral/bold/pressed': "#33373B";
-        'link/disabled': "#8D94A0";
-        'icon/neutral': "#D1D5DB";
-        'icon/neutral/bold': "#8D94A0";
-        'icon/neutral/bolder': "#575C64";
-        'icon/accent/gray': "#33373B";
-        'icon/accent/blue/subtle': "#abc5f7";
-        'icon/accent/blue': "#4880ee";
-        'icon/accent/blue/bold': "#335ba9";
-        'icon/accent/green': "#1FCCA1";
-        'icon/accent/yellow': "#FFC107";
-        'icon/accent/red': "#F22735";
-        'icon/inverse': "#FFFFFF";
-        'icon/disabled': "#D1D5DB";
-        'icon/disabled/subtler': "#E5E7EB";
-        'icon/selected/primary': "#835EEB";
-        'icon/selected': "#33373B";
-        'icon/primary/subtle': "#C6B5F6";
-        'icon/primary': "#835EEB";
-        'icon/primary/bold': "#5D43A7";
-        'icon/success': "#1FCCA1";
-        'icon/warning': "#FFC107";
-        'icon/danger': "#F22735";
-        'border/neutral/subtle': "#F3F4F6";
-        'border/neutral': "#E5E7EB";
-        'border/neutral/bolder': "#D1D5DB";
-        'border/input': "#E5E7EB";
-        'border/inverse': "#FFFFFF1A";
-        'border/selected': "#33373B";
-        'border/disabled': "#F3F4F6";
-        'border/primary': "#835EEB";
-        'border/hovered': "#84aaf4";
-        'border/focused': "#4880ee";
-        'border/danger': "#F22735";
-        'border/success': "#1FCCA1";
-        'border/accent/blue': "#4880ee";
-        'bg/secondary': "#F3EFFD";
-        'bg/secondary/hovered': "#D9CDF9";
-        'bg/secondary/pressed': "#D9CDF9";
-        'bg/primary': "#835EEB";
-        'bg/primary/hovered': "#5D43A7";
-        'bg/primary/pressed': "#5D43A7";
-        'bg/primary/disabled': "#E8E1FB";
-        'bg/neutral/subtlest': "#FFFFFF00";
-        'bg/neutral/subtlest/hovered': "#F9FAFB";
-        'bg/neutral/subtlest/pressed': "#F9FAFB";
-        'bg/neutral/subtler': "#FFFFFF00";
-        'bg/neutral/subtler/hovered': "#F3F4F6";
-        'bg/neutral/subtler/pressed': "#F3F4F6";
-        'bg/neutral/subtle': "#F9FAFB";
-        'bg/neutral/subtle/hovered': "#E5E7EB";
-        'bg/neutral/subtle/pressed': "#E5E7EB";
-        'bg/neutral': "#F3F4F6";
-        'bg/neutral/hovered': "#D1D5DB";
-        'bg/neutral/pressed': "#D1D5DB";
-        'bg/neutral/bold': "#575C64";
-        'bg/neutral/bold/hovered': "#33373B";
-        'bg/neutral/bold/pressed': "#33373B";
-        'bg/neutral/bolder': "#33373B";
-        'bg/neutral/bolder/hovered': "#000000";
-        'bg/neutral/bolder/pressed': "#000000";
-        'bg/disabled': "#F3F4F6";
-        'bg/disabled/subtlest': "#FFFFFF00";
-        'bg/input': "#FFFFFF";
-        'bg/accent/blue/subtlest': "#edf2fd";
-        'bg/accent/green/subtlest': "#E9FAF6";
-        'bg/accent/yellow/subtlest': "#FFF9E6";
-        'bg/accent/red/subtlest': "#FEE9EB";
-        'bg/accent/red/subtle': "#F5525D";
-        'bg/accent/red': "#F22735";
-        'bg/accent/gray/subtlest': "#E5E7EB";
-        'bg/selected/primary': "#835EEB";
-        'bg/selected': "#33373B";
-        'bg/selected/subtle': "#F3F4F6";
-        'bg/inverse': "#000000";
-        'bg/inverse/subtlest': "#FFFFFF1A";
-        'bg/success': "#E9FAF6";
-        'bg/success/bold': "#1FCCA1";
-        'bg/warning': "#FFF9E6";
-        'bg/warning/bold': "#FFC107";
-        'bg/danger': "#FEE9EB";
-        'bg/danger/bold': "#F5525D";
-        'bg/danger/bold/hovered': "#DC2330";
-        'bg/danger/bold/pressed': "#DC2330";
-        'text/primary': "#835EEB";
-        'text/accent/blue': "#4880ee";
-        'text/accent/green': "#1FCCA1";
-        'text/accent/yellow': "#FFC107";
-        'text/accent/red': "#F22735";
-        'text/weak': "#D1D5DB";
-        'text/neutral/subtlest': "#8D94A0";
-        'text/neutral/subtler': "#7A828D";
-        'text/neutral/subtle': "#575C64";
-        'text/neutral': "#33373B";
-        'text/inverse': "#FFFFFF";
-        'text/inverse/subtle': "#E5E7EB";
-        'text/inverse/subtler': "#D1D5DB";
-        'text/disabled': "#8D94A0";
-        'text/success': "#1FCCA1";
-        'text/warning': "#FFC107";
-        'text/danger': "#F22735";
-        'text/selected': "#33373B";
+        readonly surface: "#FFFFFF";
+        readonly 'surface/overlay': "#FFFFFF";
+        readonly 'scale/violet/0': "#F3EFFD";
+        readonly 'scale/violet/1': "#E8E1FB";
+        readonly 'scale/violet/2': "#D9CDF9";
+        readonly 'scale/violet/3': "#C6B5F6";
+        readonly 'scale/violet/4': "#9C7EEF";
+        readonly 'scale/violet/5': "#835EEB";
+        readonly 'scale/violet/6': "#7756D6";
+        readonly 'scale/violet/7': "#5D43A7";
+        readonly 'scale/violet/8': "#483481";
+        readonly 'scale/violet/9': "#372763";
+        readonly 'scale/gray/0': "#F9FAFB";
+        readonly 'scale/gray/1': "#F3F4F6";
+        readonly 'scale/gray/2': "#E5E7EB";
+        readonly 'scale/gray/3': "#D1D5DB";
+        readonly 'scale/gray/4': "#8D94A0";
+        readonly 'scale/gray/5': "#7A828D";
+        readonly 'scale/gray/6': "#6F7680";
+        readonly 'scale/gray/7': "#575C64";
+        readonly 'scale/gray/8': "#43484E";
+        readonly 'scale/gray/9': "#33373B";
+        readonly 'scale/blue/0': "#edf2fd";
+        readonly 'scale/blue/1': "#c6d8fa";
+        readonly 'scale/blue/2': "#abc5f7";
+        readonly 'scale/blue/3': "#84aaf4";
+        readonly 'scale/blue/4': "#6d99f1";
+        readonly 'scale/blue/5': "#4880ee";
+        readonly 'scale/blue/6': "#4274d9";
+        readonly 'scale/blue/7': "#335ba9";
+        readonly 'scale/blue/8': "#284683";
+        readonly 'scale/blue/9': "#1e3664";
+        readonly 'scale/green/0': "#E9FAF6";
+        readonly 'scale/green/1': "#BAEFE2";
+        readonly 'scale/green/2': "#98E8D4";
+        readonly 'scale/green/3': "#69DDC0";
+        readonly 'scale/green/4': "#4CD6B4";
+        readonly 'scale/green/5': "#1FCCA1";
+        readonly 'scale/green/6': "#1CBA93";
+        readonly 'scale/green/7': "#169172";
+        readonly 'scale/green/8': "#117059";
+        readonly 'scale/green/9': "#0D5644";
+        readonly 'scale/pink/0': "#FCF2FD";
+        readonly 'scale/pink/1': "#F5D6F8";
+        readonly 'scale/pink/2': "#F0C2F4";
+        readonly 'scale/pink/3': "#E9A7EF";
+        readonly 'scale/pink/4': "#E595EC";
+        readonly 'scale/pink/5': "#DE7BE7";
+        readonly 'scale/pink/6': "#CA70D2";
+        readonly 'scale/pink/7': "#9E57A4";
+        readonly 'scale/pink/8': "#7A447F";
+        readonly 'scale/pink/9': "#5D3461";
+        readonly 'scale/skyblue/0': "#EFF9FD";
+        readonly 'scale/skyblue/1': "#CFEDF8";
+        readonly 'scale/skyblue/2': "#B7E4F5";
+        readonly 'scale/skyblue/3': "#96D8F1";
+        readonly 'scale/skyblue/4': "#82D1EE";
+        readonly 'scale/skyblue/5': "#63C5EA";
+        readonly 'scale/skyblue/6': "#5AB3D5";
+        readonly 'scale/skyblue/7': "#468CA6";
+        readonly 'scale/skyblue/8': "#366C81";
+        readonly 'scale/skyblue/9': "#2A5362";
+        readonly 'scale/red/0': "#FDF0F0";
+        readonly 'scale/red/1': "#F9CFCF";
+        readonly 'scale/red/2': "#F6B8B8";
+        readonly 'scale/red/3': "#F29898";
+        readonly 'scale/red/4': "#F08484";
+        readonly 'scale/red/5': "#EC6565";
+        readonly 'scale/red/6': "#D75C5C";
+        readonly 'scale/red/7': "#A84848";
+        readonly 'scale/red/8': "#823838";
+        readonly 'scale/red/9': "#632A2A";
+        readonly 'scale/yellow/0': "#FEF9EE";
+        readonly 'scale/yellow/1': "#FCEBCC";
+        readonly 'scale/yellow/2': "#FAE2B3";
+        readonly 'scale/yellow/3': "#F8D490";
+        readonly 'scale/yellow/4': "#F7CC7A";
+        readonly 'scale/yellow/5': "#F5BF59";
+        readonly 'scale/yellow/6': "#DFAE51";
+        readonly 'scale/yellow/7': "#AE883F";
+        readonly 'scale/yellow/8': "#876931";
+        readonly 'scale/yellow/9': "#675025";
+        readonly dim: "#00000099";
+        readonly link: "#4880ee";
+        readonly 'link/hovered': "#335ba9";
+        readonly 'link/pressed': "#335ba9";
+        readonly 'link/neutral': "#7A828D";
+        readonly 'link/neutral/hovered': "#575C64";
+        readonly 'link/neutral/pressed': "#575C64";
+        readonly 'link/neutral/bold': "#575C64";
+        readonly 'link/neutral/bold/hovered': "#33373B";
+        readonly 'link/neutral/bold/pressed': "#33373B";
+        readonly 'link/disabled': "#8D94A0";
+        readonly 'icon/neutral': "#D1D5DB";
+        readonly 'icon/neutral/bold': "#8D94A0";
+        readonly 'icon/neutral/bolder': "#575C64";
+        readonly 'icon/accent/gray': "#33373B";
+        readonly 'icon/accent/blue/subtle': "#abc5f7";
+        readonly 'icon/accent/blue': "#4880ee";
+        readonly 'icon/accent/blue/bold': "#335ba9";
+        readonly 'icon/accent/green': "#1FCCA1";
+        readonly 'icon/accent/yellow': "#FFC107";
+        readonly 'icon/accent/red': "#F22735";
+        readonly 'icon/inverse': "#FFFFFF";
+        readonly 'icon/disabled': "#D1D5DB";
+        readonly 'icon/disabled/subtler': "#E5E7EB";
+        readonly 'icon/selected/primary': "#835EEB";
+        readonly 'icon/selected': "#33373B";
+        readonly 'icon/primary/subtle': "#C6B5F6";
+        readonly 'icon/primary': "#835EEB";
+        readonly 'icon/primary/bold': "#5D43A7";
+        readonly 'icon/success': "#1FCCA1";
+        readonly 'icon/warning': "#FFC107";
+        readonly 'icon/danger': "#F22735";
+        readonly 'border/neutral/subtle': "#F3F4F6";
+        readonly 'border/neutral': "#E5E7EB";
+        readonly 'border/neutral/bolder': "#D1D5DB";
+        readonly 'border/input': "#E5E7EB";
+        readonly 'border/inverse': "#FFFFFF1A";
+        readonly 'border/selected': "#33373B";
+        readonly 'border/disabled': "#F3F4F6";
+        readonly 'border/primary': "#835EEB";
+        readonly 'border/hovered': "#84aaf4";
+        readonly 'border/focused': "#4880ee";
+        readonly 'border/danger': "#F22735";
+        readonly 'border/success': "#1FCCA1";
+        readonly 'border/accent/blue': "#4880ee";
+        readonly 'bg/secondary': "#F3EFFD";
+        readonly 'bg/secondary/hovered': "#D9CDF9";
+        readonly 'bg/secondary/pressed': "#D9CDF9";
+        readonly 'bg/primary': "#835EEB";
+        readonly 'bg/primary/hovered': "#5D43A7";
+        readonly 'bg/primary/pressed': "#5D43A7";
+        readonly 'bg/primary/disabled': "#E8E1FB";
+        readonly 'bg/neutral/subtlest': "#FFFFFF00";
+        readonly 'bg/neutral/subtlest/hovered': "#F9FAFB";
+        readonly 'bg/neutral/subtlest/pressed': "#F9FAFB";
+        readonly 'bg/neutral/subtler': "#FFFFFF00";
+        readonly 'bg/neutral/subtler/hovered': "#F3F4F6";
+        readonly 'bg/neutral/subtler/pressed': "#F3F4F6";
+        readonly 'bg/neutral/subtle': "#F9FAFB";
+        readonly 'bg/neutral/subtle/hovered': "#E5E7EB";
+        readonly 'bg/neutral/subtle/pressed': "#E5E7EB";
+        readonly 'bg/neutral': "#F3F4F6";
+        readonly 'bg/neutral/hovered': "#D1D5DB";
+        readonly 'bg/neutral/pressed': "#D1D5DB";
+        readonly 'bg/neutral/bold': "#575C64";
+        readonly 'bg/neutral/bold/hovered': "#33373B";
+        readonly 'bg/neutral/bold/pressed': "#33373B";
+        readonly 'bg/neutral/bolder': "#33373B";
+        readonly 'bg/neutral/bolder/hovered': "#000000";
+        readonly 'bg/neutral/bolder/pressed': "#000000";
+        readonly 'bg/disabled': "#F3F4F6";
+        readonly 'bg/disabled/subtlest': "#FFFFFF00";
+        readonly 'bg/input': "#FFFFFF";
+        readonly 'bg/accent/blue/subtlest': "#edf2fd";
+        readonly 'bg/accent/green/subtlest': "#E9FAF6";
+        readonly 'bg/accent/yellow/subtlest': "#FFF9E6";
+        readonly 'bg/accent/red/subtlest': "#FEE9EB";
+        readonly 'bg/accent/red/subtle': "#F5525D";
+        readonly 'bg/accent/red': "#F22735";
+        readonly 'bg/accent/gray/subtlest': "#E5E7EB";
+        readonly 'bg/selected/primary': "#835EEB";
+        readonly 'bg/selected': "#33373B";
+        readonly 'bg/selected/subtle': "#F3F4F6";
+        readonly 'bg/inverse': "#000000";
+        readonly 'bg/inverse/subtlest': "#FFFFFF1A";
+        readonly 'bg/success': "#E9FAF6";
+        readonly 'bg/success/bold': "#1FCCA1";
+        readonly 'bg/warning': "#FFF9E6";
+        readonly 'bg/warning/bold': "#FFC107";
+        readonly 'bg/danger': "#FEE9EB";
+        readonly 'bg/danger/bold': "#F5525D";
+        readonly 'bg/danger/bold/hovered': "#DC2330";
+        readonly 'bg/danger/bold/pressed': "#DC2330";
+        readonly 'text/primary': "#835EEB";
+        readonly 'text/accent/blue': "#4880ee";
+        readonly 'text/accent/green': "#1FCCA1";
+        readonly 'text/accent/yellow': "#FFC107";
+        readonly 'text/accent/red': "#F22735";
+        readonly 'text/weak': "#D1D5DB";
+        readonly 'text/neutral/subtlest': "#8D94A0";
+        readonly 'text/neutral/subtler': "#7A828D";
+        readonly 'text/neutral/subtle': "#575C64";
+        readonly 'text/neutral': "#33373B";
+        readonly 'text/inverse': "#FFFFFF";
+        readonly 'text/inverse/subtle': "#E5E7EB";
+        readonly 'text/inverse/subtler': "#D1D5DB";
+        readonly 'text/disabled': "#8D94A0";
+        readonly 'text/success': "#1FCCA1";
+        readonly 'text/warning': "#FFC107";
+        readonly 'text/danger': "#F22735";
+        readonly 'text/selected': "#33373B";
     };
     gradients: {
         readonly 'overlay/subtlest/toright': string;

package/esm/packages/token-studio/esm/token/color/index.js

@@ -205,6 +205,10 @@ const scaleColor = {
   'scale/yellow/8': palette.mustardYellow800,
   'scale/yellow/9': palette.mustardYellow900
 };
+const surfaceColor = {
+  'surface': palette.white,
+  'surface/overlay': palette.white
+};
 const color = {
   ...textColor,
   ...bgColor,
@@ -212,7 +216,8 @@ const color = {
   ...iconColor,
   ...linkColor,
   ...dimColor,
-  ...scaleColor
+  ...scaleColor,
+  ...surfaceColor
 };
 
 export { color as default };

package/esm/packages/token-studio/esm/token/elevation/index.js

@@ -1,12 +1,7 @@
-import palette from '../../foundation/palette/index.js';
 import shadow from '../../foundation/shadow/index.js';
 
-const surfaceElevation = {
-  'surface': palette.white,
-  'surface/overlay': palette.white
-};
-const shadowElevation = {
+const elevation = {
   'shadow/overlay': shadow.shadowMedium
 };
 
-export { shadowElevation, surfaceElevation };
+export { elevation as default };

package/esm/theme/index.js

@@ -1,6 +1,6 @@
 import breakpoints from '../packages/token-studio/esm/token/breakpoints/index.js';
 import color from '../packages/token-studio/esm/token/color/index.js';
-import { surfaceElevation, shadowElevation } from '../packages/token-studio/esm/token/elevation/index.js';
+import elevation from '../packages/token-studio/esm/token/elevation/index.js';
 import gradient from '../packages/token-studio/esm/token/gradient/index.js';
 import opacity from '../packages/token-studio/esm/token/opacity/index.js';
 import radii from '../packages/token-studio/esm/token/radii/index.js';
@@ -17,14 +17,9 @@ const theme = {
   fontSizes,
   lineHeights,
   radii,
-  colors: {
-    ...color,
-    ...surfaceElevation
-  },
+  colors: color,
   gradients: gradient,
-  shadows: {
-    ...shadowElevation
-  },
+  shadows: elevation,
   opacity
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.48.1",
+  "version": "2.49.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -56,7 +56,7 @@
     "@floating-ui/react": "^0.27.16",
     "@primer/behaviors": "^1.3.6",
     "@teamturing/icons": "^1.54.0",
-    "@teamturing/token-studio": "^1.15.0",
+    "@teamturing/token-studio": "^1.16.0",
     "@teamturing/utils": "^1.5.0",
     "framer-motion": "^10.16.4",
     "lodash.debounce": "^4.0.8",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "086b9fd22ad9f0554c69512d18d2a90ca02231ee"
+  "gitHead": "6d484eb11ba50fad1a90ee1c8750330353157a54"
 }