composeRestyleFunctions not accepting `border`

[vivekfyi]

Current behavior

I am creating custom component using composeRestyleFunctions i am using the example provided in doc https://shopify.github.io/restyle/fundamentals/components/custom-components/

Code i am using:

const restyleFunctions = composeRestyleFunctions<Theme, RestyleProps>([
  spacing,
  border,
  backgroundColor,
  createVariant({ themeKey: 'buttonVariants' }),
]);

In above code i am getting following typescript error:

@acme/ui:dev: RollupError: Failed to compile. Check the logs above.
@acme/ui:dev:     at error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:210:30)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23975:20)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23220:42)
@acme/ui:dev:     at Object.transform (/Users/vivex/expo-monorepo-example/node_modules/tsup/dist/rollup.js:7287:20)
@acme/ui:dev:     at /Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:24176:40
@acme/ui:dev: src/Button.tsx(26,3): error TS2322: Type '({ property: "borderStyle" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth"; themeKey: undefined; variant: boolean; func: RestyleFunction<...>; } | { ...; } | { ...; })[]' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:   Type '({ property: "borderStyle" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth"; themeKey: undefined; variant: boolean; func: RestyleFunction<...>; } | { ...; } | { ...; })[]' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:     Type '{ property: "borderStyle" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth"; themeKey: undefined; variant: boolean; func: RestyleFunction<...>; } | { ...; } | { ...; }' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:       Type '{ property: "borderBottomEndRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStartRadius" | "borderRadius" | "borderTopEndRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStartRadius"; themeKey: "borderRadii" | undefined; variant: boolean; func: RestyleFunction<...>; }' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:         Types of property 'themeKey' are incompatible.
@acme/ui:dev:           Type '"borderRadii" | undefined' is not assignable to type '"textVariants" | "spacing" | "colors" | "cardVariants" | "buttonVariants" | undefined'.
@acme/ui:dev:             Type '"borderRadii"' is not assignable to type '"textVariants" | "spacing" | "colors" | "cardVariants" | "buttonVariants" | undefined'.
@acme/ui:dev: 
@acme/ui:dev: DTS Build failed
@acme/ui:dev: RollupError: Failed to compile. Check the logs above.
@acme/ui:dev:     at error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:210:30)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23975:20)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23220:42)
@acme/ui:dev:     at Object.transform (/Users/vivex/expo-monorepo-example/node_modules/tsup/dist/rollup.js:7287:20)
@acme/ui:dev:     at /Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:24176:40
@acme/ui:dev: src/Button.tsx(26,3): error TS2322: Type '({ property: "borderStyle" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth"; themeKey: undefined; variant: boolean; func: RestyleFunction<...>; } | { ...; } | { ...; })[]' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:   Type '({ property: "borderStyle" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth"; themeKey: undefined; variant: boolean; func: RestyleFunction<...>; } | { ...; } | { ...; })[]' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:     Type '{ property: "borderStyle" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth"; themeKey: undefined; variant: boolean; func: RestyleFunction<...>; } | { ...; } | { ...; }' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:       Type '{ property: "borderBottomEndRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStartRadius" | "borderRadius" | "borderTopEndRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStartRadius"; themeKey: "borderRadii" | undefined; variant: boolean; func: RestyleFunction<...>; }' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:         Types of property 'themeKey' are incompatible.
@acme/ui:dev:           Type '"borderRadii" | undefined' is not assignable to type '"textVariants" | "spacing" | "colors" | "cardVariants" | "buttonVariants" | undefined'.
@acme/ui:dev:             Type '"borderRadii"' is not assignable to type '"textVariants" | "spacing" | "colors" | "cardVariants" | "buttonVariants" | undefined'.
@acme/ui:dev: 
@acme/ui:dev: DTS Build failed
@acme/ui:dev: RollupError: Failed to compile. Check the logs above.
@acme/ui:dev:     at error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:210:30)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23975:20)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23220:42)
@acme/ui:dev:     at Object.transform (/Users/vivex/expo-monorepo-example/node_modules/tsup/dist/rollup.js:7287:20)
@acme/ui:dev:     at /Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:24176:40
@acme/ui:dev: src/Button.tsx(4,3): error TS2305: Module '"@shopify/restyle"' has no exported member 'borderRadius'.
@acme/ui:dev: 
@acme/ui:dev: DTS Build failed
@acme/ui:dev: RollupError: Failed to compile. Check the logs above.
@acme/ui:dev:     at error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:210:30)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23975:20)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23220:42)
@acme/ui:dev:     at Object.transform (/Users/vivex/expo-monorepo-example/node_modules/tsup/dist/rollup.js:7287:20)```


## Expected behavior


## To Reproduce
Following example from https://shopify.github.io/restyle/fundamentals/components/custom-components/

## Platform:

- [ ] iOS

## Environment
^2.4.4

[lohmander]

Did you define borderRadii in your theme?

[IliasHad]

1. Update your theme.tsx file to include borderRadiiproperties

import {createTheme} from '@shopify/restyle';

const palette = {
  purpleLight: '#8C6FF7',
  purplePrimary: '#5A31F4',
  purpleDark: '#3F22AB',

  greenLight: '#56DCBA',
  greenPrimary: '#0ECD9D',
  greenDark: '#0A906E',

  black: '#0B0B0B',
  white: '#F0F2F3',
};

const theme = createTheme({
  colors: {
    mainBackground: palette.white,
    cardPrimaryBackground: palette.purplePrimary,
  },
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 40,
  },
  borderRadii: {
    s: 8,
    m: 16,
    l: 100,
    xl: 40,
  },
  textVariants: {
    header: {
      fontWeight: 'bold',
      fontSize: 34,
    },
    body: {
      fontSize: 16,
      lineHeight: 24,
    },
    defaults: {
      // We can define a default text variant here.
    },
  },
});

export type Theme = typeof theme;
export default theme;

2. Use your button component

          <Button
            label="Test"
            onPress={() => console.log("Test")}
            borderRadius="m"
            borderWidth={10}
            borderColor="mainBackground"
            backgroundColor="cardPrimaryBackground"
          />