Function Box

Parameters

• props: BackgroundColorProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          transparent: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }> & OpacityProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          transparent: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }> & VisibleProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          transparent: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }> & LayoutProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          transparent: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }> & SpacingProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          transparent: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }> & {} & {} & {} & {} & {} & {} & {} & SpacingShorthandProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          transparent: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }> & BackgroundColorShorthandProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          transparent: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }> & Omit<ViewProps & {}, "left" | "width" | "height" | "minWidth" | "maxWidth" | "minHeight" | "maxHeight" | "overflow" | "aspectRatio" | "alignContent" | "alignItems" | "alignSelf" | "justifyContent" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginHorizontal" | "marginVertical" | "marginStart" | "marginEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingHorizontal" | "paddingVertical" | "paddingStart" | "paddingEnd" | "columnGap" | "rowGap" | "gap" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopWidth" | "borderStartWidth" | "borderEndWidth" | "borderWidth" | "borderColor" | "borderTopColor" | "borderRightColor" | "borderLeftColor" | "borderBottomColor" | "borderStartColor" | "borderEndColor" | "borderRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomStartRadius" | "borderBottomEndRadius" | "borderTopStartRadius" | "borderTopEndRadius" | "shadowOpacity" | "shadowOffset" | "shadowRadius" | "elevation" | "position" | "top" | "right" | "bottom" | "start" | "end" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "ms" | "me" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "ps" | "pe" | "g" | "rg" | "cg" | "backgroundColor" | "opacity" | "visible" | "shadowColor" | "zIndex" | "bg"> & RefAttributes<unknown>