How to use the @kiwicom/orbit-design-tokens.defaultTokens.spaceXSmall function in @kiwicom/orbit-design-tokens

const styles = StyleSheet.create({
  container: {
    marginStart: 20,
    paddingStart: parseInt(defaultTokens.spaceLarge, 10),
    paddingVertical: parseInt(defaultTokens.spaceMedium, 10),
    flexDirection: 'row',
    borderColor: defaultTokens.paletteInkLighter,
    borderStartWidth: 2,
    alignItems: 'center',
    web: {
      borderStyle: 'dotted',
    },
  },
  icon: {
    marginEnd: parseInt(defaultTokens.spaceXSmall, 10),
  },
  text: {
    fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
    color: defaultTokens.colorTextSecondary,
  },
});

},
  scrollContainer: {
    flexGrow: 1,
    paddingVertical: parseFloat(defaultTokens.spaceXSmall),
    flexWrap: 'wrap',
    flexDirection: 'row',
  },
  labelContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: parseFloat(defaultTokens.spaceXSmall),
  },
  container: {
    alignItems: 'center',
    flexDirection: 'row',
    paddingHorizontal: parseFloat(defaultTokens.spaceXSmall),
    borderRadius: 3,
  },
  fieldContainer: {
    flexDirection: 'row',
    flex: 1,
  },
  label: {
    color: defaultTokens.paletteInkDark,
    lineHeight: 16,
  },
  opacityZero: {
    opacity: 0,
  },
  opacityOne: {
    opacity: 1,
  },

);
  }
}

const styles = StyleSheet.create({
  scrollView: {
    maxHeight: 150,
  },
  scrollContainer: {
    flexGrow: 1,
    paddingVertical: parseFloat(defaultTokens.spaceXSmall),
    flexWrap: 'wrap',
    flexDirection: 'row',
  },
  labelContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: parseFloat(defaultTokens.spaceXSmall),
  },
  container: {
    alignItems: 'center',
    flexDirection: 'row',
    paddingHorizontal: parseFloat(defaultTokens.spaceXSmall),
    borderRadius: 3,
  },
  fieldContainer: {
    flexDirection: 'row',

`;

const Headline = styled.div`
  margin: 0;
  padding-right: 0px;
  position: relative;
  z-index: 2;
  @media (min-width: ${defaultTokens.widthBreakpointDesktop}px) {
    padding-right: ${phoneWidthBuffer}px;
  }
`;

const ProductName = styled.span`
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.9);
  padding: ${defaultTokens.spaceXXSmall} ${defaultTokens.spaceXSmall};
  color: ${defaultTokens.paletteProductNormal};
`;

const GithubLogoWrapper = styled.div`
  padding-left: ${defaultTokens.spaceSmall};
  position: relative;
  top: ${defaultTokens.spaceXXXSmall};
`;

const ButtonWrapper = styled.div`
  display: flex;
`;

const HeadlineTextWrapper = styled.p`
  text-shadow: 0 0 30px rgba(0, 0, 0, 1), 0 0 30px rgba(0, 0, 0, 1);
  color: white;

const dayNames = getDayNames(weekStartsOn);
  return (
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    borderBottomColor: defaultTokens.borderColorTableCell,
    borderBottomWidth: parseFloat(defaultTokens.borderWidthCard),
    padding: parseFloat(defaultTokens.spaceXSmall),
  },
  dayNameContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: designTokens.paddingCalendarItem / 2,
  },
  dayName: {
    color: defaultTokens.colorTextSecondary,
  },
});

tabId={1}
              style={styles.info}
            />
          )}
      
    );
  }
}

const styles = StyleSheet.create({
  row: {
    flex: 1,
    flexDirection: 'row',
  },
  info: {
    marginStart: parseFloat(defaultTokens.spaceXSmall),
  },
});

/>
    );
  });
  return (
    <>
      {options}

const gradientHeight = 20;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  gradientOverlapContainer: {
    position: 'relative',
    marginTop: -gradientHeight,
  },
  gradientOverlapImage: {
    height: gradientHeight,
    width: '100%',
  },
  monthsContainer: {
    marginHorizontal: parseFloat(defaultTokens.spaceXSmall),
    paddingBottom: gradientHeight,
  },
  flatList: {
    web: { paddingEnd: scrollBarWidth },
  },
});

)}
    
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: parseFloat(defaultTokens.spaceXSmall),
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  paddingRow: {
    paddingBottom: parseFloat(defaultTokens.spaceXSmall),
  },
  iconWrapper: {
    paddingHorizontal: parseFloat(defaultTokens.spaceXSmall),
    width: 40,
  },
  infoWrapper: {
    paddingStart: 40,
    justifyContent: 'space-between',
    paddingBottom: parseFloat(defaultTokens.spaceXSmall),
  },
});