ResponsiveValue from 'styled-system' doesn't work

[tomtobac]

In Typescript we are not getting the autocomplete of the space because ResponsiveValue utility returns any...

node_modules/@twilio-paste/style-props/dist/types/space.d.ts

import { ThemeShape } from '@twilio-paste/theme';
import { ResponsiveValue } from '@twilio-paste/styling-library';
export declare type SpaceOptions = keyof ThemeShape['space'];
export declare type Space = ResponsiveValue<SpaceOptions>;
export declare type Padding = Space;
export declare type Margin = Space | 'auto';
export interface MarginProps {
    margin?: Margin;
    marginTop?: Margin;
    marginRight?: Margin;
    marginBottom?: Margin;
    marginLeft?: Margin;
}
export interface PaddingProps {
    padding?: Padding;
    paddingTop?: Padding;
    paddingRight?: Padding;
    paddingBottom?: Padding;
    paddingLeft?: Padding;
}
export interface SpaceProps extends MarginProps, PaddingProps {
}
//# sourceMappingURL=space.d.ts.m

Margin

Space

Space options

[tomtobac]

I couldn't find this utility in styled-system... even the the package @twilio-paste/styling-library doesn't export this method...

[TheSisb]

The @twilio-paste/styling-library package has two devDependencies that you might need. Try adding

    "@types/styled-system": "^5.1.9",
    "@types/styled-system__css": "^5.0.5"

to your project and see if that fixes the issue. If that fixes it, I'll move these as dependencies of the package since they're just typescript definitions so it shouldn't cause any issues.

[tomtobac]

hey @TheSisb, installing @types/styled-system fixes the issue. Thanks!

[TheSisb]

Awesome! I made a PR to fix this #663

[corinne-nagel]

Hi @tomtobac I've reached out to the team and should have a response for you today.

[richbachman]

Hi @tomtobac, will you share a code sample showing where you're getting the error for space? Any information about the your project environment would be helpful as well. Thanks.

[tomtobac]

hey @richbachman, it's our internal role sip-connectivity